<template>
  <div>
    <el-container style="height:100vh;">
      <el-header>
        <img src="../assets/sun.png" alt="">
        <h4>青年旅社后台管理系统</h4>
        <h4 v-if="$store.state.user">欢迎：{{$store.state.user.nickname}}</h4>
        <h4 v-else>未登录</h4>
        
        
      </el-header>
      <el-container>
        <el-aside width="200px">
            <el-menu  background-color="#000" text-color="white" router :default-active="$route.path" >
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-s-home"></i>
                  <span slot="title">分店管理</span>
                </template>
                <el-menu-item index="/home/branch-list">
                  <i class="el-icon-menu"></i>
                  <span slot="title">分店列表</span>
                </el-menu-item>
                <el-menu-item index="/home/branch-add">
                  <i class="el-icon-plus"></i>
                  <span slot="title">新增分店</span>
                </el-menu-item>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-s-cooperation"></i>
                  <span slot="title">部门管理</span>
                </template>
                <el-menu-item index="/home/dept-list">
                  <i class="el-icon-menu"></i>
                  <span slot="title">部门列表</span>
                </el-menu-item>
                <el-menu-item index="/home/dept-add">
                  <i class="el-icon-plus"></i>
                  <span slot="title">新增部门</span>
                </el-menu-item>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-user-solid"></i>
                  <span slot="title">员工管理</span>
                </template>
                <el-menu-item index="/home/emp-list">
                  <i class="el-icon-menu"></i>
                  <span slot="title">员工列表</span>
                </el-menu-item>
                <el-menu-item index="/home/emp-add">
                  <i class="el-icon-plus"></i>
                  <span slot="title">新增员工</span>
                </el-menu-item>
              </el-submenu>
              <el-submenu index="4">
                <template slot="title">
                  <i class="el-icon-table-lamp"></i>
                  <span slot="title">房间种类管理</span>
                </template>
                <el-menu-item index="/home/type-list">
                  <i class="el-icon-menu"></i>
                  <span slot="title">房间种类列表</span>
                </el-menu-item>
                <el-menu-item index="/home/type-add">
                  <i class="el-icon-plus"></i>
                  <span slot="title">新增房间种类</span>
                </el-menu-item>
              </el-submenu>
              <el-submenu index="5">
                <template slot="title">
                  <i class="el-icon-ice-tea"></i>
                  <span slot="title">上海分店管理</span>
                </template>
                <el-menu-item index="/home/shanghai-list">
                  <i class="el-icon-menu"></i>
                  <span slot="title">房间列表</span>
                </el-menu-item>
                <el-menu-item index="/home/shanghai-add">
                  <i class="el-icon-plus"></i>
                  <span slot="title">新增房间</span>
                </el-menu-item>
              </el-submenu>
              <el-submenu index="6">
                <template slot="title">
                  <i class="el-icon-cherry"></i>
                  <span slot="title">北京分店管理</span>
                </template>
                <el-menu-item index="/home/beijing-list">
                  <i class="el-icon-menu"></i>
                  <span slot="title">房间列表</span>
                </el-menu-item>
                <el-menu-item index="/home/beijing-add">
                  <i class="el-icon-plus"></i>
                  <span slot="title">新增房间</span>
                </el-menu-item>
              </el-submenu>
              <el-submenu index="7">
                <template slot="title">
                  <i class="el-icon-sugar"></i>
                  <span slot="title">深圳分店管理</span>
                </template>
                <el-menu-item index="/home/shenzhen-list">
                  <i class="el-icon-menu"></i>
                  <span slot="title">房间列表</span>
                </el-menu-item>
                <el-menu-item index="/home/shenzhen-add">
                  <i class="el-icon-plus"></i>
                  <span slot="title">新增房间</span>
                </el-menu-item>
              </el-submenu>
              <el-submenu index="8">
                <template slot="title">
                  <i class="el-icon-food"></i>
                  <span slot="title">广州分店管理</span>
                </template>
                <el-menu-item index="/home/guangzhou-list">
                  <i class="el-icon-menu"></i>
                  <span slot="title">房间列表</span>
                </el-menu-item>
                <el-menu-item index="/home/guangzhou-add">
                  <i class="el-icon-plus"></i>
                  <span slot="title">新增房间</span>
                </el-menu-item>
              </el-submenu>
              <el-submenu index="9">
                <template slot="title">
                  <i class="el-icon-truck"></i>
                  <span slot="title">重庆分店管理</span>
                </template>
                <el-menu-item index="/home/chongqing-list">
                  <i class="el-icon-menu"></i>
                  <span slot="title">房间列表</span>
                </el-menu-item>
                <el-menu-item index="/home/chongqing-add">
                  <i class="el-icon-plus"></i>
                  <span slot="title">新增房间</span>
                </el-menu-item>
              </el-submenu>
              <el-submenu index="10">
                <template slot="title">
                  <i class="el-icon-mic"></i>
                  <span slot="title">杭州分店管理</span>
                </template>
                <el-menu-item index="/home/hangzhou-list">
                  <i class="el-icon-menu"></i>
                  <span slot="title">房间列表</span>
                </el-menu-item>
                <el-menu-item index="/home/hangzhou-add">
                  <i class="el-icon-plus"></i>
                  <span slot="title">新增房间</span>
                </el-menu-item>
              </el-submenu>
              <el-submenu index="11">
                <template slot="title">
                  <i class="el-icon-bicycle"></i>
                  <span slot="title">成都分店管理</span>
                </template>
                <el-menu-item index="/home/chengdu-list">
                  <i class="el-icon-menu"></i>
                  <span slot="title">房间列表</span>
                </el-menu-item>
                <el-menu-item index="/home/chengdu-add">
                  <i class="el-icon-plus"></i>
                  <span slot="title">新增房间</span>
                </el-menu-item>
              </el-submenu>
              <el-submenu index="12">
                <template slot="title">
                  <i class="el-icon-goblet-square-full"></i>
                  <span slot="title">南京分店管理</span>
                </template>
                <el-menu-item index="/home/nanjing-list">
                  <i class="el-icon-menu"></i>
                  <span slot="title">房间列表</span>
                </el-menu-item>
                <el-menu-item index="/home/nanjing-add">
                  <i class="el-icon-plus"></i>
                  <span slot="title">新增房间</span>
                </el-menu-item>
              </el-submenu>
              <el-submenu index="13">
                <template slot="title">
                  <i class="el-icon-cloudy-and-sunny"></i>
                  <span slot="title">武汉分店管理</span>
                </template>
                <el-menu-item index="/home/wuhan-list">
                  <i class="el-icon-menu"></i>
                  <span slot="title">房间列表</span>
                </el-menu-item>
                <el-menu-item index="/home/wuhan-add">
                  <i class="el-icon-plus"></i>
                  <span slot="title">新增房间</span>
                </el-menu-item>
              </el-submenu>
              <el-submenu index="14">
                <template slot="title">
                  <i class="el-icon-link"></i>
                  <span slot="title">苏州分店管理</span>
                </template>
                <el-menu-item index="/home/suzhou-list">
                  <i class="el-icon-menu"></i>
                  <span slot="title">房间列表</span>
                </el-menu-item>
                <el-menu-item index="/home/suzhou-add">
                  <i class="el-icon-plus"></i>
                  <span slot="title">新增房间</span>
                </el-menu-item>
              </el-submenu>
            </el-menu>
        </el-aside>
        <el-main>
            <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>


export default {
  
}
</script>

<style lang="scss" scope>
  .el-header{
    background-color: #409EFF;
    line-height: 60px;
    font-size: 21px;
    font-weight: bold;
    color: white;
    display: flex;
    >img{
      display: block;
      width: 50px;
      
    }
    >h4:nth-child(2){
      margin-left: 30px;
      flex: 1;
      font-size: 23px;
    }
  }
  .el-aside{
    >.el-menu{
      border-right:none;
    }
  }

  .el-aside::-webkit-scrollbar{
    display: none;
  }

  
</style>
